<template>
  <div class="container">
    <!--导航栏-->
    <circle-header :leftType="'VOTE'"></circle-header>
    <div class="tab-container">
      <van-tabs @click="selectType" v-model="selected" color="#075ebb" title-active-color="#0F80F0" title-inactive-color="#999" >
        <van-tab v-for="(item,index) in tabs" :key="index" :name="index" :title="item.name">
        </van-tab>
      </van-tabs>
    </div>
    <div class="scroller-container" v-if="total >= 1">
      <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
        <van-list
        v-model="isLoading"
        :finished="finished"
        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
        loding-text="loading"
        @load="getVoteByType"
        style="padding-bottom: 56px;"
        >
          <div class="content-container" v-for="item in voteList" :key="item.votId" @click="clickItem(item.votId)">
              <p>{{item.votTitle}}</p>
              <div class="content-title">
                <span>{{$t('circle238')}}</span>
                <span>{{item.votEffDateTo | substringTime}}</span>
              </div>
              <div class="content-bottom">
                  <div style="display: flex">
                    <span class="border" :style="item.involved ? { backgroundColor: '#00BA5F'}:{ backgroundColor: '#ccc'}">{{checkType(item.involved)}}</span>
                    <span>{{item.involvedCount || '--' }}</span>
                    <span>{{$t('circle241')}}</span>
                  </div>
                <div>
                  <span>{{item.authorName}}</span>
                  <span>{{$t('circle242')}}</span>
                  <span>{{item.votCreateTimestamp | yyyyMMdd}}</span>
                </div>
              </div>
          </div>
          <common-loading :isLoading="isLoading"></common-loading>
        </van-list>
      </van-pull-refresh>
    </div>
    <!--暂无数据-->
    <div v-if="!isLoading && total <= 0" style="height: 100%">
      <div class="box-table" style="width:100%;height:100%;">
        <div class="box-table-cell" style="text-align: center;">
          <div class="no-data">
            <img src="../../../../static/images/no-data.png" alt=""/>
            <p class="color999">{{ $t("no_data") }}</p>
          </div>
        </div>
      </div>
    </div>
   </div>
</template>

<script>
import CircleHeader from '@/repeatComponents/circleHeader/CircleHeader';
import {Tab, Tabs} from 'vant';
export default {
    name: 'VoteList',
    components: {
        CircleHeader,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs
    },
    data() {
        return {
            circleId: this.$route.query.circleId,
            selected: 0,
            tabs: [
                {name: this.$t('circle234'), type: 'ALL'},
                {name: this.$t('circle235'), type: 'ONGOING'},
                {name: this.$t('circle236'), type: 'FINISHED'},
                {name: this.$t('circle237'), type: 'INITIATED'}
            ],
            isTop: false,
            pageNo: 1,
            totalPage: 1,
            total: 0,
            isLoading: false,
            onFetching: false,
            voteList: [],
            finished: false,
            isRefresh: false
        };
    },
    computed: {
        checkType() {
            return function(involved) {
                if (involved) {
                    return this.$t('circle239');
                }
                return this.$t('circle240');
            };
        }
    },
    methods: {
        //选择tab
        selectType(name) {
            this.selected = name;
            this.pageNo = 1;
            this.getVoteByType('refresh');
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getVoteByType('refresh');
                this.isRefresh = false;
            }, 900);
        },
        //获取全部投票信息
        getVoteByType(option) {
            this.isLoading = true;
            this.$axios({
                methods: 'GET',
                url: `/app/api/trainee/work-circle/voting/${this.circleId}`,
                params: {
                    condition: this.tabs[this.selected].type,
                    pageNo: this.pageNo
                }
            }).then(res => {
                if (option && option === 'refresh') {
                    this.voteList = res.data.results;
                } else {
                    if (res.data.results) {
                        this.voteList = [...this.voteList, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.voteList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        clickItem(votId) {
            this.$router.push({path: '/circle/vote/detail', query: {votId}});
        }
    },
    mounted() {
        this.getVoteByType('refresh');
    }
};
</script>

<style scoped lang="less">
  /deep/.van-tabs__line{
    width: 55px
  }
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      .tab-container{
        border-top: #f3f3f3 1px solid;
        line-height: 45px;
        padding-top: 56px;
      }
      .scroller-container{
        flex: 1;
        height: 100px;
        .content-container{
          display: flex;
          flex-direction: column;
          max-height: 160px;
          background-color: #fff;
          margin-top: 10px;
          padding: 24px 12px 18px 16px;
          >p{
            width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            font-size: 14px;
            color: #333;
          }
          .content-title{
            padding-top: 14px;
            >span{
              font-size: 12px;
              color: #999;
            }
          }
          .content-bottom{
            padding-top: 22px;
            display: flex;
            justify-content: space-between;
            .border{
              display: block;
              width: 50px;
              line-height: 20px;
              text-align: center;
              justify-content: center;
              border-radius: 8px;
              font-size: 11px;
              color: #fff;
              margin-right: 10px;
            }
            span{
              line-height: 20px;
              font-size: 11px;
              color: #666;
            }
          }
        }
      }
    }

</style>
